<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rpg</title>
  <link rel="stylesheet" href="./css.css">
</head>
<body>
<header>
<div class="health">
  <span>生命值:</span>
  <div class="Health"><div class="health-bar"></div></div>
</div>
<div class="magic">
  <span>魔力值:</span>
  <div class="Magic"><div class="magic-bar"></div></div>
</div>

</header>

<div class="body">
  <div class="jumping-text title"></div>
  <div class="left">
    <div class="left-top1">
        <div class="left-top1-top">
          <div class="flag"></div>
          <div class="ExperiencePoint">等级:1</div>
          <div class="coins">金币:0</div>
        </div>
        <div class="left-top1-bottom">
          <div class="experience-bar">0/300</div>
        </div>
    </div>
    <div class="left-top2">
      <span class="wea_title"></span>
      <ul>
        <li class="wea_text1"></li>
        <li class="wea_text2"></li>
        <li class="wea_text3"></li>
      </ul>
    </div>
    <div class="left-top3">
      <span class="equ_title1"></span>
      <ul>
        <li class="equ_text1_1"></li>
        <li class="equ_text2_1"></li>
      </ul>
    </div>
    <div class="left-top4">
      <span class="equ_title2"></span>
      <ul>
        <li class="equ_text1_2"></li>
        <li class="equ_text2_2"></li>
      </ul>
    </div>
    <div class="left-mid">
      <img src="./img/null.png" alt="" class="wea_img">
      <img src="./img/null.png" alt="" class="equ_img1">
      <img src="./img/null.png" alt="" class="equ_img2">
    </div>
    <div class="left-bottom">
      <img src="" alt="">
    </div>
  </div>
  <div class="screen">
    <span class="typing-text"></span>
      <div class="move cloud1"></div>
      <div class="move cloud2"></div>
      <div class="move cloud3"></div>
      <div class="move cloud4"></div>
      <div class="move cloud5"></div>
      <div class="move cloud6"></div>
      <div class="move cloud7"></div>
      <div class="move cloud8"></div>

      <div class="move stone1"></div>
      <div class="move stone2"></div>
      <div class="move stone3"></div>
      <div class="move stone4"></div>
      <div class="move stone5"></div>
      <div class="move stone6"></div>

      <div class="turn">你的回合</div>
      <img src="./img/角色1.png" class="player"></img>
      <div class="mon"><div class="mon_hp_bar"></div></div>
      <img src="" class="monster"></img>
      <img src="" class="event"></img>
      <button class="walk hide">前进</button>
      <button class="start">开始游戏</button>

    <div class="box role">
      <div class="title">选择职业</div>
      <div class="inbox"></div>
    </div>
    <div class="box weapon">
      <div class="title">选择武器</div>
      <button>跳过</button>
      <div class="inbox"></div>
    </div>
    <div class="box equipment">
      <div class="title">选择装备</div>
      <button>跳过</button>
      <div class="inbox"></div>
    </div>
    <div class="box blessings">
      <div class="title">选择祝福</div>
      <button>跳过</button>
      <div class="inbox"></div>
    </div>
    <div class="box skill">
      <div class="title">选择技能</div>
      <button>跳过</button>
      <div class="inbox"></div>
    </div>
    <div class="box prop">
      <div class="title">选择道具</div>
      <button>跳过</button>
      <div class="inbox"></div>
    </div>
  </div>
  <div class="right">
    <div class="attribute">
      <div class="attribute-box1">
        <span>攻击力:<i class="ATK">14140</i></span>
        <span>法术强度:<i class="SPELL-POWER">14140</i></span>
      </div>
      <div class="attribute-box1">
        <span>暴击率:<i class="CRIT-RATE">14140</i> %</span>
        <span>暴击伤害:<i class="CRIT-DMG">14140</i> %</span>
      </div>
      <div class="attribute-box1">
        <span>速度:<i class="SPEED">14140</i></span>
        <span>防御力:<i class="DEFENSE">14140</i></span>
      </div>
      <div class="attribute-box2">
        <span>近战伤害加成:<i class="jingzhan">114</i> %</span>
      </div>
      <div class="attribute-box2">
        <span>远程伤害加成:<i class="yuancheng">1414</i> %</span>
      </div>
      <div class="attribute-box2">
        <span>法术伤害加成:<i class="fashu">1140</i> %</span>
      </div>
      <div class="attribute-box2">
        <span>火元素伤害加成:<i class="fire">1140</i> %</span>
      </div>
      <div class="attribute-box2">
        <span>水元素伤害加成:<i class="water">1410</i> %</span>
      </div>
      <div class="attribute-box2">
        <span>风元素伤害加成:<i class="wind">4140</i> %</span>
      </div>
    </div>
    <div class="attribute2">
      <div class="attribute2-box">
        <span>基础攻击力:<i class="o_atk"></i></span>
        <span>武器攻击力:<i class="w_atk"></i></span>
        <span>攻击力加成:<i class="m_atk"></i> %</span>
        <span>武器攻击加成:<i class="w_m_atk"></i> %</span>
        <hr>
        <span>基础法强:<i class="o_spell_power"></i></span>
        <span>武器法强:<i class="w_spell_power"></i></span>
        <span>法强加成:<i class="m_spell_power"></i> %</span>
        <span>武器法强加成:<i class="w_m_spell_power"></i> %</span>
        <hr>
        <span>基础速度:<i class="o_speed"></i></span>
        <span>武器速度:<i class="w_speed"></i></span>
        <span>速度加成:<i class="m_speed"></i> %</span>
        <span>武器速度加成:<i class="w_m_speed"></i> %</span>
        <hr>
        <span>基础暴击:<i class="o_crit_rate"></i> %</span>
        <span>武器暴击:<i class="w_crit_rate"></i> %</span>
        <span>基础爆伤:<i class="o_crit_dmg"></i> %</span>
        <span>武器爆伤:<i class="w_crit_dmg"></i> %</span>
      </div>
      <div class="attribute2-box">
        <span>基础防御:<i class="o_defense"></i></span>
        <span>武器防御:<i class="w_defense"></i></span>
        <span>防御力加成:<i class="m_defense"></i> %</span>
        <span>武器防御力加成:<i class="w_m_defense"></i> %</span>
        <hr>
        <span>基础近战伤害加成:<i class="m_jingzhan"></i> %</span>
        <span>基础远程伤害加成:<i class="m_yuancheng"></i> %</span>
        <span>基础法术伤害加成:<i class="m_fashu"></i> %</span>
        <span>基础火元素伤害加成:<i class="m_fire"></i> %</span>
        <span>基础水元素伤害加成:<i class="m_water"></i> %</span>
        <span>基础风元素伤害加成:<i class="m_wind"></i> %</span>
        <hr>
        <hr>
        <span>武器近战伤害加成:<i class="w_m_jingzhan"></i> %</span>
        <span>武器远程伤害加成:<i class="w_m_yuancheng"></i> %</span>
        <span>武器法术伤害加成:<i class="w_m_fashu"></i> %</span>
        <span>武器火元素伤害加成:<i class="w_m_fire"></i> %</span>
        <span>武器水元素伤害加成:<i class="w_m_water"></i> %</span>
        <span>武器风元素伤害加成:<i class="w_m_wind"></i> %</span>
      </div>
    </div>
  </div>
</div>
<div class="bottom">
<div class="fight1">
  <div class="barrier"></div>
  <div class="tips">Tips</div>
</div>
<div class="fight2">
  <button class="attack button-locked">普通攻击</button>
  <button class="skills button-locked">使用技能</button>
  <button class="potion button-locked">使用血瓶</button>
  <button class="potion2 button-locked">使用魔瓶</button>
</div>
<div class="fight3">
  <div class="fight-skill">
  </div>
  <div class="skills-text">
  </div>
  <div class="delete">
    <input type="button" value="删除技能" class="delete-button">
  </div>
  <div class="delete2 hide">
    <span>输入技能序号</span>
    <span>(0123)</span>
    <input type="number" class="number">
    <input type="submit" class="submit">
  </div>
</div>
</div>



















<script src="./js.js"></script>
</body>
</html>